<template>
	<view class="series-list">
		<view class="series-list__intro" v-if="!isDelete">
			<view class="series-list__intro--top">
				<view class="series-list__intro--top__image">
					<image :src="seriesInfo.image" mode=""></image>
				</view>
				<view class="series-list__intro--top__info">
					<view class="series-list__intro--top__info--title">{{seriesInfo.SeriesTitle}}</view>
					<view class="series-list__intro--top__info--user">
						<view class="series-list__intro--top__info--user-avator">
							<avator circle :name="seriesInfo.CreateUser" :avator="seriesInfo.avator"></avator>
						</view>
						<view class="series-list__intro--top__info--user-name">{{seriesInfo.CreateUser}}</view>
					</view>
				</view>
				<view class="series-list__intro--top-right">
					<view class="series-list__intro--top-right-self" v-if="seriesInfo.CreatePxid == pxid">
						<view class="series-list__intro--top-right-self-btn" @click="goPage">作品管理</view>
					</view>
					<view class="series-list__intro--top-right-other" v-else>
						<view class="series-list__intro--top-right-other-btn1" v-if="seriesInfo.IsFavor == '0'" @click="addSeriesFavorite">+ 收藏</view>
						<view class="series-list__intro--top-right-other-btn2" v-else @click="delSeriesFavorite">已收藏</view>
					</view>
				</view>
			</view>
			<view class="series-list__intro--center">
				<view class="series-list__intro--center__item">
					<text class="series-list__intro--center__item-text1">{{seriesInfo.SubjectCount}}篇</text>
					<text class="series-list__intro--center__item-text2">作品</text>
				</view>
				<view class="series-list__intro--center__item">
					<text class="series-list__intro--center__item-text1">{{seriesInfo.SumViewCount}}</text>
					<text class="series-list__intro--center__item-text2">浏览</text>
				</view>
				<view class="series-list__intro--center__item">
					<text class="series-list__intro--center__item-text2">更新于{{seriesInfo.UpdateTime}}</text>
				</view>
			</view>
			<view class="series-list__intro--des">{{seriesInfo.SeriesBrief}}</view>
		</view>
		
		<view class="series-list__body" v-if="!isDelete">
			<view class="series-list__body--list" v-for="(item,index) in list" :key="item.Id" @click="goPageDetail(item)">
				<view class="series-list__body--list__top">
					<view class="series-list__body--list__top--image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="series-list__body--list__top--right">
						<view class="series-list__body--list__top--right-title">{{item.SubjectTitle}}</view>
						<view class="series-list__body--list__top--right-content">{{item.CoverContent}}</view>
					</view>
				</view>
				<view class="series-list__body--list__bottom">
					<view class="series-list__body--list__bottom--left">{{item.time}}</view>
					<view class="series-list__body--list__bottom--right">
						<text>{{item.ReplyCount}}评论</text>
						<text style="margin: 0 20rpx;">·</text>
						<text>{{item.LikesCount}}点赞</text>
					</view>
				</view>
				<u-gap height="8" bgColor="#eee"></u-gap>
			</view>
			<no-data v-if="noData"></no-data>
		</view>
		<no-data text="内容已删除" v-else></no-data>
		
		<u-popup round="10" :show="setPopVisible" @close="setPopVisible = false" @open="setPopVisible = true">
			<view class="set-pop">
				<view class="set-pop-box">
					<view class="set-pop-box__item" @click="goPageSeriesEdit" v-if="seriesInfo.CreatePxid == pxid">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/community/edit-series.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">编辑合集</view>
					</view>
					<view class="set-pop-box__item" @click="del" v-if="seriesInfo.CreatePxid == pxid || isMaster == '1'">
						<view class="set-pop-box__item--icon">
							<image src="@/static/theme/default/community/del-series.png" mode=""></image>
						</view>
						<view class="set-pop-box__item--text">删除合集</view>
					</view>
				</view>
				<view class="set-pop-cancel" @click="setPopVisible = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import { timestampFormat,formatImg,entitiestoUtf16 } from '@/common/custom_util.js';
	import Avator from '@/components/custom/avator/avator.vue';
	import DefaultSeries from '@/static/theme/default/community/series.png';
	import DefaultSubject from '@/static/theme/default/community/tiezi.png';
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			Avator,
			NoData
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				isMaster: _data.localData('isMaster'),//是否为管理员，'1'：是
				seriesid: -1,
				seriesInfo: {},
				sorting: 'desc',
				currentpage: 1,
				pagesize: 10,
				keyword: '',
				list: [],
				noData: false,
				noMore: false,
				setPopVisible: false,
				isDelete: false,
			}
		},
		onLoad(optinos) {
			this.seriesid = optinos.seriesid;
		},
		onShow() {
			this.init();
			this.getSubjectListBySeriesId();
			this.getSubjectSeriesInfoById();
		},
		onReachBottom() {
			if(!this.noMore) {
				this.currentpage += 1;
				this.getSubjectListBySeriesId();
			}
		},
		onNavigationBarButtonTap() {
			if(this.isDelete) return
			if(this.seriesInfo.CreatePxid != this.pxid && this.isMaster != '1') return
			this.setPopVisible = true;
		},
		methods: {
			init() {
				this.currentpage = 1;
				this.noMore = false;
				this.noData = false;
				this.list = [];
			},
			/**
			 * 获取合集详情
			 */
			getSubjectSeriesInfoById() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getSubjectSeriesInfoById',
						apiparam: {
							seriesid: this.seriesid,
							obsusername: this.obsusername,
							obspxid: this.pxid,
						},
						success(res) {
							if(!res.length || !Object.keys(res[0]).length) {
								that.isDelete = true;
								return
							}
							res[0].image = res[0].SeriesImage ? formatImg(res[0].SeriesImage) : DefaultSeries;
							res[0].avator = that.static_avator + "/static/photo/user/" + res[0].CreatePxid + "/70.jpg";
							res[0].UpdateTime = timestampFormat(res[0].UpdateTime);
							that.seriesInfo = res[0];
						}
					})
				})
			},
			/**
			 * 获取合集中的帖子列表
			 */
			getSubjectListBySeriesId() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getSubjectListBySeriesId',
						currentpage: this.currentpage,
						pagesize: this.pagesize,
						apiparam: {
							seriesid: this.seriesid,
							keyword: this.keyword,
							obspxid: this.pxid
						},
						success(res) {
							if(res.length < that.pagesize) that.noMore = true;
							if(that.currentpage == 1 && !res.length) {
								that.noMore = false;
								that.noData = true;
							}
							res.forEach(item => {
								item.time = timestampFormat(item.UpdateTime);
								item.image = item.DefaultImage ? formatImg(item.DefaultImage) : DefaultSubject;
								item.SubjectTitle = entitiestoUtf16(item.SubjectTitle);
							})
							that.list.push(...res);
						}
					})
				})
			},
			/**
			 * 添加收藏
			 */
			addSubjectFavorites() {
				let that = this;
				_custom.getDataJava({
					apiname: 'addSubjectFavorites',
					code: 3,
					apiparam: {
						createuser: this.obsusername,
						createpxid: this.pxid,
						seriesid: this.seriesInfo.Id,//合集Id
						subjectid: '',//帖子Id
					},
					success(res) {
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						})
						that.getSubjectSeriesInfoById();
					},
					fail() {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 取消收藏
			 */
			flagDelSubjectFavorites() {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDelSubjectFavorites',
					code: 2,
					apiparam: {
						createuser: this.obsusername,
						createpxid: this.pxid,
						seriesid: this.seriesInfo.Id,//合集Id
						subjectid: '',//帖子Id
					},
					success(res) {
						uni.showToast({
							title: '取消收藏成功',
							icon: 'none'
						})
						that.getSubjectSeriesInfoById();
					},
					fail() {
						uni.showToast({
							title: '取消收藏失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 删除合集
			 */
			flagDelSubjectSeriesById(v) {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDelSubjectSeriesById',
					code: 2,
					apiparam: {
						id: v
					},
					success(res) {
						uni.showToast({
							title: '删除合集成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},300)
					},
					fail() {
						uni.showToast({
							title: '删除合集失败',
							icon: 'none'
						})
					}
				})
			},
			addSeriesFavorite() {
				this.addSubjectFavorites();
			},
			delSeriesFavorite() {
				this.flagDelSubjectFavorites();
			},
			goPage() {
				uni.navigateTo({
					url: './series-manage?data=' + JSON.stringify(this.list) + '&id=' + this.seriesInfo.Id
				})
			},
			goPageDetail(v) {
				uni.navigateTo({
					url: './subject-view?businessId=' + v.Id
				})
			},
			goPageSeriesEdit() {
				this.setPopVisible = false;
				uni.navigateTo({
					url: './series-add?data=' + JSON.stringify(this.seriesInfo)
				})
			},
			del() {
				let that = this;
				this.setPopVisible = false;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success(res) {
						if(res.confirm) {
							that.flagDelSubjectSeriesById(that.seriesInfo.Id);
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.series-list {
		
		&__intro {
			padding: 20rpx;
			background-color: #eee;
			
			
			&--top {
				display: flex;
				
				&__image {
					width: 140rpx;
					height: 140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;
					
					image {
						border-radius: 20rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}
				
				&__info {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					
					&--title {
						width: 350rpx;
						font-size: 35rpx;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					&--user {
						display: flex;
						
						&-avator {
							width: 40rpx;
							height: 40rpx;
						}
						
						&-name {
							font-size: 25rpx;
							font-weight: bold;
							margin-left: 10rpx;
						}
					}
				}
				
				&-right {
					width: 200rpx;
					
					&-self {
						
						&-btn {
							padding: 5rpx 20rpx;
							font-size: 28rpx;
							border: 1rpx solid #1890ff;
							color: #1890ff;
							border-radius: 10rpx;
							white-space: nowrap;
							text-align: center;
						}
					}
					
					&-other {
						
						&-btn1 {
							padding: 5rpx 20rpx;
							font-size: 28rpx;
							background-color: #1890ff;
							color: #fff;
							border-radius: 10rpx;
							white-space: nowrap;
							text-align: center;
						}
						
						&-btn2 {
							padding: 5rpx 20rpx;
							font-size: 28rpx;
							background-color: #d9d9d9; 
							color: #aaa;
							border-radius: 10rpx;
							white-space: nowrap;
							text-align: center;
						}
					}
				}
			}
			
			
			&--center {
				display: flex;
				margin: 20rpx 0;
				
				&__item {
					font-size: 25rpx;
					color: #aaa;
					margin-right: 20rpx;
					
					&-text1 {
						margin-right: 10rpx;
					}
				}
			}
			
			&--des {
				font-size: 30rpx;
				color: #aaa;
			}
		}
		
		&__body {
			
			&--head {
				height: 100rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;
				
				&__right {
					display: flex;
					align-items: center;
					
					&--item {
						font-size: 30rpx;
						color: #aaa;
						padding: 0 20rpx;
					}
					
					&--line {
						height: 30rpx;
						border-left: 1rpx solid #eee;
					}
				}
			}
			
			&--list {
				
				&__top {
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					height: 200rpx;
					
					&--image {
						width: 200rpx;
						height: 100%;
						background-color: #65B0FF;
						border-radius: 20rpx;
						
						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
					
					&--right {
						width: calc(100% - 200rpx);
						padding: 0 20rpx;
						box-sizing: border-box;
						
						&-title {
							width: 100%;
							font-size: 33rpx;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						
						&-content {
							width: 100%;
							font-size: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display:-webkit-box;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;
						}
					}
				}
				
				&__bottom {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
					padding-top: 0;
					box-sizing: border-box;
					font-size: 25rpx;
					color: #aaa;
					
					&--left,&--right {
						font-size: 25rpx;
						color: #aaa;
					}
				}
			}
		}
	}
	
	.set-pop {
		
		&-box {
			display: flex;
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			
			&__item {
				min-width: 100rpx;
				height: 140rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				&--icon {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #fafafa;
					display: flex;
					justify-content: center;
					align-items: center;
					
					image {
						width: 50%;
						height: 50%;
					}
				}
				
				&--text {
					font-size: 27rpx;
					color: #333;
				}
			}
		}
		
		&-cancel {
			height: 100rpx;
			background-color: #fafafa;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 100rpx;
		}
	}
	
	.head-active {
		color: #333;
	}
</style>
